// ESLint 配置文件 - 使用 Flat Config 格式
// 官方文档: https://eslint.org/docs/latest/use/configure/configuration-files-new

// 导入必要的插件和配置
import js from '@eslint/js'
import vue from 'eslint-plugin-vue'
import typescript from '@typescript-eslint/eslint-plugin'
import typescriptParser from '@typescript-eslint/parser'
import vueParser from 'vue-eslint-parser'
import prettier from 'eslint-config-prettier'

export default [
  // 基础 JavaScript 推荐配置
  js.configs.recommended,

  // Vue 3 推荐配置 - 包含 Vue 相关的最佳实践规则
  ...vue.configs['flat/recommended'],

  // 全局配置 - 定义全局变量和基础设置
  {
    languageOptions: {
      globals: {
        // Node.js 环境全局变量 - 用于构建脚本和配置文件
        console: 'readonly',
        process: 'readonly',
        Buffer: 'readonly',
        __dirname: 'readonly',
        __filename: 'readonly',
        module: 'readonly',
        require: 'readonly',
        exports: 'readonly',
        global: 'readonly',

        // 浏览器环境全局变量 - 用于前端代码
        window: 'readonly',
        document: 'readonly',
        navigator: 'readonly',
        location: 'readonly',
        history: 'readonly',
        localStorage: 'readonly',
        sessionStorage: 'readonly',
        setTimeout: 'readonly',
        clearTimeout: 'readonly',
        setInterval: 'readonly',
        clearInterval: 'readonly',
        fetch: 'readonly',

        // Web APIs - 现代浏览器 API
        File: 'readonly',
        Blob: 'readonly',
        FormData: 'readonly',
        FileReader: 'readonly',
        Image: 'readonly',
        URL: 'readonly',
        URLSearchParams: 'readonly',
        MouseEvent: 'readonly',
        KeyboardEvent: 'readonly',
        Event: 'readonly',
        XMLHttpRequest: 'readonly',
        WebSocket: 'readonly',
        HTMLImageElement: 'readonly',
        HTMLElement: 'readonly',
        EventSource: 'readonly',
        TextDecoder: 'readonly',

        // ES6+ 内置对象 - 现代 JavaScript 特性
        Promise: 'readonly',
        Set: 'readonly',
        Map: 'readonly',
        WeakSet: 'readonly',
        WeakMap: 'readonly',
        Symbol: 'readonly',
        Proxy: 'readonly',
        Reflect: 'readonly',
      },
      // 使用最新的 ECMAScript 版本
      ecmaVersion: 'latest',
      // 使用 ES 模块系统
      sourceType: 'module',
    },
  },

  // TypeScript 文件专用配置
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      // 使用 TypeScript 解析器
      parser: typescriptParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    plugins: {
      '@typescript-eslint': typescript,
    },
    rules: {
      // 应用 TypeScript 推荐规则
      ...typescript.configs.recommended.rules,
      // 允许使用 any 类型 - 在快速开发中有时需要
      '@typescript-eslint/no-explicit-any': 'warn',
      // 未使用变量警告而不是错误 - 开发过程中可能临时存在
      '@typescript-eslint/no-unused-vars': [
        'warn',
        {
          argsIgnorePattern: '^_', // 忽略以下划线开头的参数
          varsIgnorePattern: '^_', // 忽略以下划线开头的变量
        },
      ],
    },
  },

  // Vue 单文件组件配置
  {
    files: ['**/*.vue'],
    languageOptions: {
      // 使用 Vue 解析器，支持 Vue 单文件组件
      parser: vueParser,
      parserOptions: {
        // 在 Vue 文件中使用 TypeScript 解析器处理 <script> 部分
        parser: typescriptParser,
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    plugins: {
      vue,
      '@typescript-eslint': typescript,
    },
    rules: {
      // Vue 组件规则配置

      // 关闭多词组件名要求 - 允许单词组件名如 'Home'
      'vue/multi-word-component-names': 'off',
      // 关闭 v-html 警告 - 在管理后台中可能需要渲染 HTML
      'vue/no-v-html': 'off',
      // 强制 v-for 使用 key - 提高渲染性能
      'vue/require-v-for-key': 'error',
      // 验证 v-for 语法正确性
      'vue/valid-v-for': 'error',
      // 警告修改 props - 不应该直接修改父组件传递的属性
      'vue/no-mutating-props': 'warn',
      // 警告缺少默认值的 props
      'vue/require-default-prop': 'warn',
      // 警告缺少类型定义的 props
      'vue/require-prop-types': 'warn',
      // 警告无效的默认 prop 值
      'vue/require-valid-default-prop': 'warn',
      // 警告无效的 v-slot 使用
      'vue/valid-v-slot': 'warn',
      // 警告未使用的变量
      'vue/no-unused-vars': 'warn',
      // 计算属性必须有返回值
      'vue/return-in-computed-property': 'error',

      // HTML 标签自闭合规则
      'vue/html-self-closing': [
        'error',
        {
          html: {
            void: 'always', // void 元素总是自闭合 <img />
            normal: 'never', // 普通元素不自闭合 <div></div>
            component: 'always', // 组件总是自闭合 <MyComponent />
          },
        },
      ],

      // 每行最大属性数量 - 提高可读性
      'vue/max-attributes-per-line': [
        'error',
        {
          singleline: {
            max: 4, // 单行最多 4 个属性
          },
          multiline: {
            max: 3, // 多行时每行最多 3 个属性
          },
        },
      ],

      // 第一个属性换行规则
      'vue/first-attribute-linebreak': [
        'error',
        {
          singleline: 'ignore', // 单行时忽略
          multiline: 'below', // 多行时第一个属性在下一行
        },
      ],

      // 组件名在模板中使用 PascalCase - 与 Vue 3 推荐一致
      'vue/component-name-in-template-casing': ['error', 'PascalCase'],

      // HTML 缩进规则 - 2 个空格
      'vue/html-indent': ['error', 2],

      // script 标签缩进规则 - 2 个空格，基础缩进为 0
      'vue/script-indent': ['error', 2, { baseIndent: 0 }],

      // HTML 闭合标签换行规则
      'vue/html-closing-bracket-newline': [
        'error',
        {
          singleline: 'never', // 单行时不换行
          multiline: 'always', // 多行时总是换行
        },
      ],

      // JavaScript 基础规则

      // 未使用变量警告 - 开发过程中可能临时存在
      'no-unused-vars': [
        'warn',
        {
          argsIgnorePattern: '^_', // 忽略以下划线开头的参数
          varsIgnorePattern: '^_', // 忽略以下划线开头的变量
        },
      ],
      // 禁止重复声明 - 避免变量冲突
      'no-redeclare': 'error',
      // 禁止自赋值 - 通常是错误的代码
      'no-self-assign': 'error',
      // 禁止使用未定义变量 - 防止拼写错误
      'no-undef': 'error',
      // 禁止在 case 语句中声明变量 - 避免作用域问题
      'no-case-declarations': 'error',
      // 禁止在 Promise 构造函数中使用 async 函数 - 通常是错误的模式
      'no-async-promise-executor': 'error',

      // TypeScript 规则（在 Vue 文件中也适用）

      // 允许使用 any 类型 - 在快速开发中有时需要
      '@typescript-eslint/no-explicit-any': 'warn',
      // 未使用变量警告
      '@typescript-eslint/no-unused-vars': [
        'warn',
        {
          argsIgnorePattern: '^_', // 忽略以下划线开头的参数
          varsIgnorePattern: '^_', // 忽略以下划线开头的变量
        },
      ],
      // 空对象类型警告 - 提醒使用更具体的类型
      '@typescript-eslint/no-empty-object-type': 'warn',
      // 不安全函数类型警告 - 提醒使用更安全的类型定义
      '@typescript-eslint/no-unsafe-function-type': 'warn',
    },
  },

  // JavaScript 文件专用配置 - 主要用于配置文件和第三方库
  {
    files: ['**/*.js', '**/*.jsx'],
    rules: {
      // 关闭未使用变量检查 - 对于自动生成的文件（如 iconfont）
      'no-unused-vars': 'off',
      // 关闭重复声明检查 - 对于 iconfont 等文件
      'no-redeclare': 'off',
      // 关闭自赋值检查 - 对于压缩文件
      'no-self-assign': 'off',
    },
  },

  // 忽略文件配置 - 这些文件不需要进行 ESLint 检查
  {
    ignores: [
      'dist/**', // 构建输出目录
      'node_modules/**', // 依赖包目录
      'public/**', // 静态资源目录
      '*.d.ts', // TypeScript 声明文件
      'dts/**', // 类型声明目录
      '.cursor/**', // Cursor 编辑器配置
      '.idea/**', // IntelliJ IDEA 配置
      '.vscode/**', // VS Code 配置
      'manage/**', // 管理相关文件
      'src/assets/js/iconfont.js', // 自动生成的图标字体文件
    ],
  },

  // Prettier 配置集成 - 必须放在最后，避免与 Prettier 冲突
  // 这个配置会关闭所有与 Prettier 冲突的 ESLint 规则
  prettier,
]
